<template>
  <div key="id">
    <div class="flex items-center m-b-2">
      <div class="m-r-2">题目选项</div>
      <el-button size="small" :icon="Plus" circle @click="addOptionHandle" />
    </div>
    <div v-for="(item, index) in status" :key="index" class="flex items-center m-b-2">
      <el-input v-model="textArr[index]" placeholder="选项" class="m-r-2" />
      <el-button size="small" :icon="Minus" circle type="danger" @click="rmOptionHandle(index)" />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { VueComType } from '@/types'
import { Plus, Minus } from '@element-plus/icons-vue'
const props = defineProps<{
  configKey: string
  id: string
  status: string[]
  isShow: boolean
  editCom: VueComType
}>()
const textArr = ref(props.status)
const updateStatus = inject('updateStatus') as Function
const addOptionHandle = () => {
  updateStatus(props.configKey)
}
const rmOptionHandle = (index: number) => {
  console.log(index)
  updateStatus(props.configKey, index)
}
</script>

<style scoped></style>
